<template>
    <div class="gain_coupon activity">
        <navbar>{{ title }}</navbar>
        <div class="wrapper">
             <div class="content">
                 <div class="txt" v-if="detail.user">
                     <h2>恭喜你获得{{ numCN }}张野练PASS！</h2>
                     <h3>野练PASS已放入帐号：{{ detail.user.mobile }}</h3>
                 </div>

             <div class="coupon_list" v-if="detail.coupon">
                 <div class="list">
                     <ul>
                         <li>
                             <div class="liIn">
                                 <div class="coupon_l">
                                     <div class="coupon_l_l"></div>
                                     <div class="coupon_l_r">
                                         <p class="vmc-nowrap-2">{{ detail.coupon.discount.title }}</p>
                                         <div class="num" v-if="num>1">X{{ num }}</div>
                                     </div>
                                 </div>
                                 <div class="coupon_r">
                                     <h2>
                                       <button class="tag">野练</button>
                                       <span>野练PASS</span>
                                     </h2>
                                     <p>{{ detail.coupon.starts_at | date (detail.coupon.ends_at) }}</p>
                                 </div>
                             </div>
                         </li>
                     </ul>
                 </div>
             </div>
           </div>
          <div class="bottomBar bottomBar_2">
              <button class="greyBtn" @click="jump('coupon_list')">查看我的野练PASS</button>
              <button class="redBtn" @click="jump('city_list')">立即使用</button>
          </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
  import js from '../../../../cores/coupon/gain.vue';
  //
  export default {
    extends: js
  }
</script>
<style rel="stylesheet/less" lang="less">
  @import "../../../../styles/ot.less";
  .vmc-nowrap-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
</style>
